<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<link rel="stylesheet" href="../css/rem.css">
	<title>Document</title>
	<style>

		.con{
			-webkit-animation: an 0.1s 6;
			/*-webkit-animation-iteration-count: 3;   规定做几次*/
		}

		@-webkit-keyframes an{
			0%{left: 10px;}
			25%{left: -10px;}
			75%{left: 10px;}
			100%{left: -10px;}
		}
		
		@-webkit-keyframes ball {
		  0% {
		    -webkit-transform: scale(1) rotate(30deg);
		            transform: scale(1) rotate(30deg);
		    }

		  100% {
		  	 -webkit-transform: scale(0.1) rotate(360deg);
		            transform: scale(0.1) rotate(360deg);
		    }
		}
		.input-p::-webkit-input-placeholder{
		    font-size: 16px;
		    font-weight: 200;
		}
	</style>
</head>
<body>

	<div class="con">
		<div class="tit">棣中国际</div>
		<div class="body">		
			<ul>
				<li><label><input type="text" class="input-p" placeholder="输入账号"></label></li>
				<li><label><input type="password" class="input-p" placeholder="输入密码"></label></li>
			</ul>			
		</div>
		<div class="floor">
			<a href="javascript:;" class="f">返回</a>
			<a href="javascript:;" class="l">注册</a>
		</div>
	</div>

	<script>

		var fan = document.getElementsByClassName('f')[0];
		var con = document.getElementsByClassName('con')[0];

		fan.onclick = function() {
			con.style.animation = 'ball 1s';
			setTimeout(function() {
				con.style.display = 'none';
			},888)
		}


		!function (win, doc) {

			var docEl = doc.documentElement,
			resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
			recalc = function () {
				var clientWidth = docEl.clientWidth;
				if (!clientWidth) return;
				docEl.style.fontSize = 20 * (clientWidth / 1333) + 'px';
			};

			if (!doc.addEventListener) return;

			win.addEventListener(resizeEvt, recalc, false);
			doc.addEventListener('DOMContentLoaded', recalc, false);

		}(window, document);
	</script>
	
</body>
</html>


